
                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">
                    
					
					<!-- JUMBOTRON -->
					<!--===================================================-->
					<div class="jumbotron text-main">
					    <h1>Hello, world!</h1>
					    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
					    <p><a role="button" class="btn btn-primary btn-lg">Learn more</a></p>
					</div>
					<!--===================================================-->
					<!-- END JUMBOTRON -->
					
					
					<h4 class="text-main pad-btm bord-btm">Carousel</h4>
					<div class="row">
					    <div class="col-sm-6">
					        <div class="panel">
					
					            <!--Carousel-->
					            <!--===================================================-->
					            <div id="demo-carousel" class="carousel slide" data-ride="carousel">
					
					                <!--Indicators-->
					                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
					                <ol class="carousel-indicators out">
					                    <li class="active" data-slide-to="0" data-target="#demo-carousel"></li>
					                    <li data-slide-to="1" data-target="#demo-carousel"></li>
					                    <li data-slide-to="2" data-target="#demo-carousel"></li>
					                </ol>
					                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
					
					                <div class="carousel-inner text-center">
					
					                    <!--Item 1-->
					                    <div class="item active">
					                        <h4 class="text-main">First slide label</h4>
					                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
					                    </div>
					
					                    <!--Item 2-->
					                    <div class="item">
					                        <h4 class="text-main">Second slide label</h4>
					                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					                    </div>
					
					                    <!--Item 3-->
					                    <div class="item">
					                        <h4 class="text-main">Third slide label</h4>
					                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
					                    </div>
					                </div>
					
					                <!--carousel-control-->
					                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
					                <a class="carousel-control left" data-slide="prev" href="#demo-carousel"><i class="demo-pli-arrow-left icon-2x"></i></a>
					                <a class="carousel-control right" data-slide="next" href="#demo-carousel"><i class="demo-pli-arrow-right icon-2x"></i></a>
					                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
					
					            </div>
					            <!--===================================================-->
					            <!--End Carousel-->
					
					
					        </div>
					    </div>
					    <div class="col-sm-6">
					        <div class="panel panel-dark panel-colorful">
					
					            <!--Carousel - Dark Theme -->
					            <!--===================================================-->
					            <div id="demo-carousel-auto-hide" class="carousel slide" data-ride="carousel">
					
					                <!-- Square Indicators-->
					                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
					                <ol class="carousel-indicators square out">
					                    <li data-slide-to="0" data-target="#demo-carousel-auto-hide"></li>
					                    <li class="active" data-slide-to="1" data-target="#demo-carousel-auto-hide"></li>
					                    <li data-slide-to="2" data-target="#demo-carousel-auto-hide"></li>
					                </ol>
					                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
					
					                <div class="carousel-inner text-center">
					
					                    <!--Item 2-->
					                    <div class="item">
					                        <h4 class="text-light">First slide label</h4>
					                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
					                    </div>
					
					
					                    <!--Item 2-->
					                    <div class="item active">
					                        <h4 class="text-light">Second slide label</h4>
					                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					                    </div>
					
					
					                    <!--Item 2-->
					                    <div class="item">
					                        <h4 class="text-light">Third slide label</h4>
					                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
					                    </div>
					                </div>
					
					
					                <!--Auto hide carousel control-->
					                <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
					                <a class="carousel-control auto-hide left" data-slide="prev" href="#demo-carousel-auto-hide"><i class="demo-pli-arrow-left icon-2x"></i></a>
					                <a class="carousel-control auto-hide right" data-slide="next" href="#demo-carousel-auto-hide"><i class="demo-pli-arrow-right icon-2x"></i></a>
					
					            </div>
					            <!--===================================================-->
					            <!--End Carousel - Dark Theme -->
					
					        </div>
					    </div>
					</div>
					
					<br>
					<h4 class="text-main pad-btm bord-btm">Labels &amp; Badges</h4>
					<div class="row">
					    <div class="col-md-6">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Labels</h3>
					            </div>
					            <div class="panel-body demo-nifty-label-badge">
					
					                <!--Labels-->
					                <!--===================================================-->
					                <span class="label label-default">Default</span>
					                <span class="label label-primary">Primary</span>
					                <span class="label label-success">Success</span>
					                <span class="label label-info">Info</span>
					                <span class="label label-warning">Warning</span>
					                <span class="label label-danger">Danger</span>
					                <span class="label label-mint">Mint</span>
					                <span class="label label-purple">Purple</span>
					                <span class="label label-pink">Pink</span>
					                <span class="label label-dark">Dark</span>
					                <!--===================================================-->
					                <!--End Labels-->
					
					            </div>
					        </div>
					    </div>
					    <div class="col-md-6">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Badges</h3>
					            </div>
					            <div class="panel-body demo-nifty-label-badge">
					
					                <!--Badges-->
					                <!--===================================================-->
					                <span class="badge">4</span>
					                <span class="badge badge-primary">2</span>
					                <span class="badge badge-success">5</span>
					                <span class="badge badge-info">7</span>
					                <span class="badge badge-warning">9</span>
					                <span class="badge badge-danger">5</span>
					                <span class="badge badge-purple">4</span>
					                <span class="badge badge-pink">3</span>
					                <span class="badge badge-dark">7</span>
					                <!--===================================================-->
					                <!--End Badges-->
					
					            </div>
					        </div>
					    </div>
					</div>
					
					<br>
					<h4 class="text-main pad-btm bord-btm">Pagination</h4>
					<div class="row">
					    <div class="col-md-6">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Default pagination</h3>
					            </div>
					            <div class="panel-body text-center">
					
					                <!--Pagination-->
					                <!--===================================================-->
					                <ul class="pagination">
					                    <li><a href="#" class="demo-pli-arrow-left"></a></li>
					                    <li><a href="#">1</a></li>
					                    <li><a href="#">2</a></li>
					                    <li><a href="#">3</a></li>
					                    <li><a href="#">4</a></li>
					                    <li><span>...</span></li>
					                    <li><a href="#">20</a></li>
					                    <li><a href="#" class="demo-pli-arrow-right"></a></li>
					                </ul>
					                <!--===================================================-->
					                <!--End Default Pagination-->
					
					            </div>
					        </div>
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Disabled and active states</h3>
					            </div>
					            <div class="panel-body text-center">
					
					                <!--Pagination with disabled and active states-->
					                <!--===================================================-->
					                <ul class="pagination">
					                    <li class="disabled"><a href="#" class="demo-pli-arrow-left"></a></li>
					                    <li class="active"><a href="#">1</a></li>
					                    <li><a href="#">2</a></li>
					                    <li><a href="#">3</a></li>
					                    <li><a href="#">4</a></li>
					                    <li><span>...</span></li>
					                    <li><a href="#">20</a></li>
					                    <li><a href="#" class="demo-pli-arrow-right"></a></li>
					                </ul>
					                <!--===================================================-->
					                <!--End Pagination with disabled and active states-->
					
					            </div>
					        </div>
					    </div>
					    <div class="col-md-6">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Sizing</h3>
					            </div>
					            <div class="panel-body text-center">
					                <div class="pad-btm">
					
					                    <!--Large Pagination-->
					                    <!--===================================================-->
					                    <ul class="pagination pagination-lg">
					                        <li><a href="#" class="demo-pli-arrow-left"></a></li>
					                        <li><a href="#">1</a></li>
					                        <li><a href="#">2</a></li>
					                        <li><a href="#">3</a></li>
					                        <li><a href="#">4</a></li>
					                        <li><span>...</span></li>
					                        <li><a href="#">20</a></li>
					                        <li><a href="#" class="demo-pli-arrow-right"></a></li>
					                    </ul>
					                    <!--===================================================-->
					                    <!--End Large Pagination-->
					
					
					                </div>
					                <div class="pad-btm">
					
					                    <!--Normal-->
					                    <!--===================================================-->
					                    <ul class="pagination">
					                        <li><a href="#" class="demo-pli-arrow-left"></a></li>
					                        <li><a href="#">1</a></li>
					                        <li><a href="#">2</a></li>
					                        <li><a href="#">3</a></li>
					                        <li><a href="#">4</a></li>
					                        <li><span>...</span></li>
					                        <li><a href="#">5</a></li>
					                        <li><a href="#" class="demo-pli-arrow-right"></a></li>
					                    </ul>
					                    <!--===================================================-->
					                    <!--End Normal-->
					
					                </div>
					                <div class="pad-btm">
					
					                    <!--Small Pagination-->
					                    <!--===================================================-->
					                    <ul class="pagination pagination-sm">
					                        <li><a href="#" class="demo-pli-arrow-left"></a></li>
					                        <li><a href="#">1</a></li>
					                        <li><a href="#">2</a></li>
					                        <li><a href="#">3</a></li>
					                        <li><a href="#">4</a></li>
					                        <li><span>...</span></li>
					                        <li><a href="#">5</a></li>
					                        <li><a href="#" class="demo-pli-arrow-right"></a></li>
					                    </ul>
					                    <!--===================================================-->
					                    <!--End Small Pagination-->
					
					                </div>
					            </div>
					        </div>
					    </div>
					</div>
					
					<br>
					<h4 class="text-main pad-btm bord-btm">Pager</h4>
					<div class="row">
					    <div class="col-md-4">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Default example</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Pager-->
					                <!--===================================================-->
					                <ul class="pager">
					                    <li><a href="#"><i class="demo-psi-arrow-left"></i> Previous</a></li>
					                    <li><a href="#">Next <i class="demo-psi-arrow-right"></i></a></li>
					                </ul>
					                <!--===================================================-->
					                <!--End Pager-->
					
					                <br>
					
					                <!--Aligned Links-->
					                <!--===================================================-->
					                <ul class="pager">
					                    <li class="previous disabled"><a href="#"><i class="demo-psi-arrow-left"></i> Previous</a></li>
					                    <li class="next"><a href="#">Next <i class="demo-psi-arrow-right"></i></a></li>
					                </ul>
					                <!--===================================================-->
					                <!--End Aligned LinkS-->
					
					            </div>
					        </div>
					    </div>
					    <div class="col-md-4">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Rounded</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Rounded Pager-->
					                <!--===================================================-->
					                <ul class="pager pager-rounded">
					                    <li><a href="#"><i class="demo-psi-arrow-left"></i> Previous</a></li>
					                    <li><a href="#">Next <i class="demo-psi-arrow-right"></i></a></li>
					                </ul>
					                <!--===================================================-->
					                <!--End Rounded pager-->
					
					                <br>
					
					                <!--Rounded Pager-->
					                <!--===================================================-->
					                <ul class="pager pager-rounded">
					                    <li class="previous"><a href="#"><i class="demo-psi-arrow-left"></i> Previous</a></li>
					                    <li class="next"><a href="#">Next <i class="demo-psi-arrow-right"></i></a></li>
					                </ul>
					                <!--===================================================-->
					                <!--End Rounded pager-->
					
					            </div>
					        </div>
					    </div>
					    <div class="col-md-4">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Icon</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Icons-->
					                <!--===================================================-->
					                <ul class="pager pager-rounded">
					                    <li><a href="#"><i class="demo-psi-arrow-left"></i></a></li>
					                    <li><a href="#"><i class="demo-psi-arrow-right"></i></a></li>
					                </ul>
					                <!--===================================================-->
					                <!--End Icons-->
					
					                <br>
					
					                <!--Icons-->
					                <!--===================================================-->
					                <ul class="pager pager-rounded">
					                    <li class="previous"><a href="#"><i class="demo-psi-arrow-left"></i></a></li>
					                    <li class="next"><a href="#"><i class="demo-psi-arrow-right"></i></a></li>
					                </ul>
					                <!--===================================================-->
					                <!--End icons-->
					
					            </div>
					        </div>
					    </div>
					</div>
					
					<br>
					<h4 class="text-main pad-btm bord-btm">Wells</h4>
					<div class="row">
					    <div class="col-md-6">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Default well</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Default well-->
					                <!--===================================================-->
					                <div class="well">Lorem ipsum dolor sit amet.</div>
					                <!--===================================================-->
					
					                <br>
					                <h4>Large well</h4>
					                <hr>
					
					                <!--Large Well-->
					                <!--===================================================-->
					                <div class="well well-lg">Lorem ipsum dolor sit amet.</div>
					                <!--===================================================-->
					
					            </div>
					        </div>
					    </div>
					    <div class="col-md-6">
					        <div class="panel">
					            <div class="panel-heading">
					                <h3 class="panel-title">Small well</h3>
					            </div>
					            <div class="panel-body">
					
					                <!--Small Well-->
					                <!--===================================================-->
					                <div class="well well-sm">Lorem ipsum dolor sit amet.</div>
					                <!--===================================================-->
					
					                <br>
					                <h4>Extra small</h4>
					                <hr>
					
					                <!--Extra Small-->
					                <!--===================================================-->
					                <div class="well well-xs">Lorem ipsum dolor sit amet.</div>
					                <!--===================================================-->
					
					            </div>
					        </div>
					    </div>
					</div>
					
					
                </div>
                <!--===================================================-->
                <!--End page content-->
